Ext.define('mdTeeBox', {
	extend: 'Ext.data.Model',
	fields: ['ID', 'NAMA']
});
var strTeeBox = new Ext.create('Ext.data.Store', {
	autoLoad : true,
	model: 'mdTeeBox',
	pageSize: 20,
	proxy: {
		type: 'ajax',
		url: base_url+'/TeeBox/TeeBoxCrud/GetAllTeeBox',
		method: 'POST',
		reader: {
				type : 'json',
				root : 'rows',
				totalProperty  : 'results'
			}
	}

});
function searchResultQAdd(){
		Ext.getCmp('gridTeeBox').body.mask('Loading Data... ','x-mask-loading');
		strTeeBox.proxy.extraParams = { query:Ext.getCmp('srcTxtTeeBox').getValue()}; //SET STORE EXTRA PARAMS FOR SEND PARAMATER USING AJAX
		strTeeBox.load(); // LOAD STORE DEFAULT FUNCTION BUT, BASE ON EXTRA PARAMS IN CODE UP THERE  
		strTeeBox.on("load", function() {
		Ext.getCmp('gridTeeBox').body.unmask();
	});
}    
var bar = {
			xtype           : 'textfield',
			labelSeparator  : '',
			id              : 'srcTxtTeeBox',
			emptyText		: 'Search...',
			enableKeyEvents : true,
			width           : 200,
			listeners       : {
					keypress : function(th,e){
							if(e.keyCode == 13){
									searchResultQAdd();
							}
					}
			}
	}
var gridTeeBox = new Ext.create('Ext.grid.Panel', {
	id:'gridTeeBox',
	// frame: true, 
	columnLines: true,
	region:'center',
	border: false, 
	store: strTeeBox, 
	height: '100%',
	width: 300,
	region:"center",
	forceFit: true,
	columns: [{xtype: 'rownumberer'},
			{
				header: 'TeeBox',
				dataIndex: 'NAMA',
			}
	 ],
	 dockedItems: [{
		xtype: 'toolbar',
		items: [
					{
						iconCls	: 'add',
						text	: 'Add',
						handler	: function(){
							showWinAddTeeBox();
						}
					},{
						iconCls	: 'update',
						text	: 'Edit',
						handler	: function(){
							rec = gridTeeBox.getSelectionModel().getSelection()[0];
							if(rec){
								showWinEditTeeBox();
								Ext.getCmp('id').setValue(rec.get('ID'));
								Ext.getCmp('nama').setValue(rec.get('NAMA'));
							}
						}
					},{
						iconCls	: 'delete',
						text	: 'Delete',
						handler	: function(){
							rec = gridTeeBox.getSelectionModel().getSelection()[0];
							if(rec){
							Ext.Msg.show({
								title: 'Confirm',
								msg: 'Anda Yakin Akan Mengahapus Data Ini ?',
								buttons: Ext.Msg.YESNO,
								fn: function(btn) {
									if (btn == 'yes') {
										Ext.Ajax.request({
										url: base_url+'/TeeBox/TeeBoxCrud/delete',
										params:{id:rec.get('ID')},
										method:'POST',
										success: function(response) {
												var obj = Ext.decode(response.responseText);
												if(obj.feedback[0].code==1){
													Ext.MessageBox.show({
													   title: 'Caution',
													   msg: obj.feedback[0].message,
													   buttons: Ext.MessageBox.OK
												   });
												   strTeeBox.load();
												}
												else{
													Ext.MessageBox.show({
													   title: 'Caution',
													   msg: obj.feedback[0].message,
													   buttons: Ext.MessageBox.OK,
													   icon: Ext.MessageBox.ERROR
												   });
												}
											}
										});
									}
								}
							});
								
							}
						}
					},'->','Search : ',bar
				],
	}],
	bbar: {
		xtype: 'pagingtoolbar',
		pageSize: 20,
		store: strTeeBox,
		displayInfo: true,
		plugins: new Ext.ux.ProgressBarPager()
	}

});

var pan = {
	id:'border-panel',
	layout: 'border',
	bodyBorder: false,
	items: [{
		title: 'TeeBox Setting',
		collapsible: false,
		layout: 'fit',
		split: true,
		region: 'center',
		contentEl: 'content',
		items: [gridTeeBox]
	}]
}
Ext.getCmp('content-panel').add(pan);